<template>
  <div class="home">
    <!-- 用户信息 -->
    <el-row :gutter="15">
      <el-col :md="24" :lg="16" :xl="16" class="mb15">
        <el-card shadow="hover">
          <div slot="header">
            <span>{{ $t('message.card.title1') }}</span>
          </div>
          <div class="user-item">
            <div class="user-item-left">
              <el-upload class="h100 personal-user-left-upload" :on-success="successImage" :action="action" multiple :limit="1">
                <img :src="getUserInfos.photo" />
              </el-upload>
            </div>
            <div class="user-item-right overflow">
              <el-row>
                <el-col :span="24" class="right-title mb15 one-text-overflow"
                >{{ currentTime }}，{{ getUserInfos.userName }}，{{ dailyMessage }}
                </el-col>
                <el-col :span="24">
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label">昵称：</div>
                    <div class="right-value">{{ userInfo.user.nickName }}</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
                    <div class="right-label">身份：</div>
                    <div class="right-value"><span v-for="role in userInfo.roles">{{role}} </span></div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="mt5">
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label one-text-overflow">IP：</div>
                    <div class="right-value one-text-overflow">{{ userInfo.user.loginIp }}</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
                    <div class="right-label one-text-overflow">时间：</div>
                    <div class="right-value one-text-overflow">{{ userInfo.time }}</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="mt15">
                  <el-button size="small" icon="el-icon-edit-outline" @click="dialogFormVisible = true">修改信息 </el-button>
                  <el-button size="small" icon="el-icon-position" type="primary">发布通知</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="8" :xl="8" class="mb15">
        <el-card shadow="hover">
          <div slot="header">
            <span>{{ $t('message.card.title2') }}</span>
            <el-button class="home-card-more" type="text" @click="onOpenGitee">{{ $t('message.card.title3') }}</el-button>
          </div>
          <div class="info">
            <Scroll :data="newsInfoList" class="info-scroll" :class-option="optionSingleHeight">
              <ul class="info-ul">
                <li v-for="(v, k) in newsInfoList" :key="k" class="info-item" @click="onNewsInfoListClick(v)">
                  <div class="info-item-left" v-text="v.title"></div>
                  <div class="info-item-right" v-text="v.date"></div>
                </li>
              </ul>
            </Scroll>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 修改用户信息  -->
    <el-dialog :visible.sync="dialogFormVisible" width="850px">
      <el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
        <div class="personal-edit-title">基本信息</div>
        <el-form  size="default" label-width="40px" class="mt35 mb35">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="昵称">
                <el-input v-model="userInfo.user.nickName"  placeholder="请输入昵称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="邮箱" w>
                <el-input v-model="userInfo.user.email" placeholder="请输入邮箱" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="手机">
                <el-input  v-model="userInfo.user.phonenumber" placeholder="请输入手机" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="性别">
                <el-select v-model="userInfo.user.sex" placeholder="请选择性别" clearable class="w100">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item>
                <el-button type="primary" @click="updateUser"><el-icon><ele-Position /></el-icon>更新个人信息</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
      <!--      </div>-->
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Scroll from 'vue-seamless-scroll';
import { CountUp } from 'countup.js';
import { Session } from '@/utils/storage';
import { formatAxis, formatDate } from '@/utils/formatTime';
import { recommendList, chartsRightList, newsInfoList, dailyMessage } from './mock';
import { updateUser } from '@/api/user';
export default {
  name: 'home',
  components: { Scroll },
  data() {
    return {
      action: "http://localhost/api/system/user/fileUpload?userId=",
      recommendList,
      chartsRightList,
      newsInfoList,
      userInfo: {},
      dailyMessage: {},
      dialogFormVisible: false    //修改框的显示与关闭
    };
  },
  created() {
    this.initUserInfo();
    this.initDailyMessage();
    this.action += this.$store.state.userInfos.userInfos.user.userId
  },
  computed: {
    currentTime() {
      return formatAxis(new Date());
    },
    optionSingleHeight() {
      return {
        singleHeight: 28,
        limitMoveNum: 8,
        waitTime: 2000,
      };
    },
    getUserInfos() {
      return this.$store.state.userInfos.userInfos;
    },
  },
  mounted() {
    this.initNumCountUp();
  },
  methods: {
    // 初始化数字滚动
    initNumCountUp() {
      this.$nextTick(() => {
        new CountUp('titleNum1', Math.random() * 100000).start();
        new CountUp('titleNum2', Math.random() * 100000).start();
        new CountUp('titleNum3', Math.random() * 100000).start();
      });
    },
    //上传图片成功回调
    successImage(){
      this.$message({message: '头像更新成功！重新登录即可刷新头像！',type: 'success'});
    },
    // 随机语录
    initDailyMessage() {
      this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)];
    },
    // 初始化登录信息
    initUserInfo() {
      if (!Session.get('userInfo')) return false;
      this.userInfo = Session.get('userInfo');
      this.userInfo.time = formatDate(new Date(this.userInfo.time), 'YYYY-mm-dd HH:MM:SS');
    },
    // 消息通知当前项点击
    onNewsInfoListClick(v) {
      window.open(v.link);
    },
    // 跳转到 gitee
    onOpenGitee() {
      window.open('https://gitee.com/lyt-top/vue-next-admin');
    },
    // 修改信息
    updateUser(){
      updateUser(this.userInfo.user).then(resp => {
        this.$message({message: resp.message,type: 'success'});
        this.dialogFormVisible = false
      })
      console.log(this.userInfo.user)
    },
  },
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
